<!--
 * @Description: 首页预览
 * @Author: fxg
 * @Date: 2020-06-29 11:18:28
 * @LastEditors: fxg
 * @LastEditTime: 2020-06-29 13:34:36
-->
<template>
	<div class="indexsee">
		<div v-loading="loading" class="indexsee_bg" element-loading-text="页面构建中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
			<div class="title">预览界面</div>
			<div class="saveFlex">
				<el-button size="medium" class="bottom_all_two" @click="$router.go(-1)">返回</el-button>
				<el-button size="medium" class="bottom_all" @click="saveFlex()">应用</el-button>
			</div>
		</div>
		<div ref="imageTofile">
			<div class="nav">
				<div class="left">
					<div class="title">
						<img class="img" src="@/assets/nav/logo.png" />
						<span>华西绿舍云平台</span>
					</div>
				</div>
				<el-menu default-active="index" :background-color="bg_color" active-text-color="#fff" text-color="rgba(255,255,255,0.65)" class="el-menu-demo" mode="horizontal">
					<el-menu-item index="pagesA">
						<div>基础系统</div>
					</el-menu-item>
					<el-submenu index="">
						<template slot="title">
							ICPS系统
						</template>
						<el-menu-item index="2-1">绿舍云销</el-menu-item>
						<el-menu-item index="2-2">绿舍数采</el-menu-item>
						<el-menu-item index="2-3">绿舍智造</el-menu-item>
						<el-menu-item index="2-2">绿舍优服</el-menu-item>
						<el-menu-item index="2-3">绿舍慧算</el-menu-item>
					</el-submenu>
					<el-menu-item index="pagesB">
						<div>财务系统</div>
					</el-menu-item>
					<el-menu-item index="">
						<div>报表系统</div>
					</el-menu-item>
					<el-menu-item index="">
						<div>更多</div>
					</el-menu-item>
				</el-menu>
				<div class="right_top-menu">
					<div>
						<div>
							<IconA :index="theme"></IconA>
						</div>
					</div>
					<!--颜色-->
					<div>
						<div>
							<IconB :index="theme"></IconB>
						</div>
					</div>
					<!--下载-->
					<div>
						<IconF :index="theme"></IconF>
					</div>
					<!--字体-->
					<div>
						<IconC :index="theme"></IconC>
					</div>
					<!--通知-->
					<div>
						<el-badge :value="12">
							<IconD :index="theme"></IconD>
						</el-badge>
					</div>
					<!--头像-->
					<div>
						<div class="user_avatar">
							<el-avatar size="small" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
							<span class="user_name">用户名</span>
							<IconE :index="theme"></IconE>
						</div>
					</div>
				</div>
			</div>

			<div>
				<div v-for="(item, index) in flex" :key="index">
					<!--第一页布局-->
					<div v-if="index == 0">
						<div class="index">
							<div :style="leftStyle" class="left">
								<homeLeft></homeLeft>
							</div>
							<div class="center"></div>
							<div :style="rightStyle" class="right">
								<homeRight :list="flex[0].pages.list"></homeRight>
							</div>
						</div>
					</div>
					<!-- 新页面 -->
					<div v-else class="new_pages">
						<div :key="time" class="new_pages_bg shadow">
							<div v-for="(pagesItem, pagesIndex) in item.pages" :key="pagesIndex" :style="col(pagesItem.height)" class="pages_col">
								<div v-for="(arrItem, arrIndex) in pagesItem.arr" :key="arrIndex" :style="line(arrItem.width)" class="pages_item">
									<div v-if="arrItem.name=='iframe'">
										<iframe class="iframe" frameborder="0" seamless :src="arrItem.url"></iframe>
									</div>
									<div v-else-if="toJSON(arrItem.data).graphicalCss=='table-basic'">
										<Table :data="toJSON(arrItem.data)"></Table>
									</div>
									<div v-else>
										<Echart1 :data="toJSON(arrItem.data)" :name="'right'+arrIndex+pagesIndex+toJSON(arrItem.data).id"></Echart1>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import IconA from '@/components/icon/nav_iconA';
import IconB from '@/components/icon/nav_iconB';
import IconC from '@/components/icon/nav_iconC';
import IconD from '@/components/icon/nav_iconD';
import IconE from '@/components/icon/nav_iconE';
import IconF from '../../../components/icon/nav_iconF.vue';
import homeLeft from '@/components/home_left/home_left';
import homeRight from '@/components/home_right/home_right';
//import Index from '@/components/home/index.vue';
import Echart1 from '@/views/platform/ICPS/board/components/echart1.vue';
import Table from '@/views/platform/ICPS/board/components/table.vue';
import { saveOrUpdate } from '@/api/basedata/pageConfig.js';
import { mapGetters } from 'vuex';
import styles from '@/app.scss';
import { source_page } from "@/api/board/datashow.js";
export default {
	components: {
		IconA,
		IconB,
		IconC,
		IconD,
		IconE,
		IconF,
		homeLeft,
		homeRight,
		Echart1,
		Table
	},
	data() {
		return {
			bg_color: styles.bg_color,
			screenWidth: 0,
			flex: '',
			loading: true,
			roleId: '',
			time: '',
			fromData: {
				page: 1,
				pageSize: 9999
			},
			echarts: []
		};
	},
	async	created() {
		let _this = this
		await source_page(_this.fromData).then(res => {
			res.data.data.forEach(res => {
				res.dataField = JSON.parse(res.dataField)
				res.colorCss = JSON.parse(res.colorCss)
			})
			_this.echarts = res.data.data
		})
		_this.roleId = _this.$route.query.roleId
		_this.screenWidth = _this.onScreenWidth(document.documentElement.clientWidth);
		window.onresize = () => {
			return (() => {
				_this.screenWidth = _this.onScreenWidth(document.documentElement.clientWidth);
			})();
		};
		_this.flex = JSON.parse(sessionStorage.getItem('flex'));
		let color = localStorage.getItem('color');
		if (color) {
			_this.chooseBg(color);
		}
	},
	computed: {
		...mapGetters({
			theme: 'gettheme'
		}),
		leftStyle() {
			return 'width:' + (this.screenWidth - 72) * this.flex[0].pages.leftwidth + 'px';
		},
		rightStyle() {
			return 'width:' + (this.screenWidth - 72) * this.flex[0].pages.rightwidth + 'px';
		}
	},
	mounted() {
		let _this = this;
		setTimeout(function () {
			_this.loading = false;
		}, 1000);
	},
	methods: {
		toJSON(data) {
			console.log(data)
			let item = this.echarts.find(res => (res.id == JSON.parse(data).id))
			return item
		},
		chooseBg(command) {
			window.document.getElementsByTagName('body')[0].style.setProperty('--bg_colorTable', command.split(',')[1]);
			window.document.getElementsByTagName('body')[0].style.setProperty('--bg_color', command.split(',')[0]);
			localStorage.setItem('color', command);
		},
		col(height) {
			return 'height:' + height;
		},
		line(width) {
			return 'width:' + width;
		},
		onScreenWidth(Width) {
			if (Width < 1440) {
				return 1440;
			} else {
				return Width;
			}
		},
		saveFlex() {
			/*请求接口*/
			saveOrUpdate({ pageInfo: JSON.stringify(this.flex), roleId: this.roleId }).then(() => {
				this.$router.go(-2)
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.el-menu-item,
.el-submenu__title {
  font-size: calc(#{$font_size} + 2px);
  font-weight: 400;
}
.indexsee {
  .indexsee_bg {
    height: 100vh;
    width: 100%;
    z-index: 2000;
    position: fixed;
    background: rgba(0, 0, 0, 0);
    border: 3px $bg_color solid;
    .title {
      color: #808080;
      padding: 12px;
      font-weight: 700;
    }
    .saveFlex:hover {
      cursor: pointer;
    }
    .saveFlex {
      position: fixed;
      bottom: 10px;
      right: 10px;
      display: flex;
    }
  }
  .nav {
    height: 60px;
    background: $bg_color;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 $px_24;
    .left {
      display: flex;
    }
    .title {
      .img {
        height: 30px;
      }
      span {
        padding: 0 10px;
        @include ellipsis;
      }
      color: #ffffff;
      width: 250px;
      font-size: calc(#{$font_size} + 6px);
      @include discen;
    }
    .right_top-menu {
      @include discen_al;
      > div:hover > div * {
        cursor: pointer;
        color: #ffffff;
      }
      > div {
        padding-left: 20px;
        @include discen;
        i {
          font-size: 18px;
          color: rgba(255, 255, 255, 0.65);
        }
      }
    }
    .size_text {
      padding: 5px 0;
    }
    .notice {
      width: 400px;
      display: flex;
      justify-content: space-between;
      span:last-child {
        color: red;
      }
    }
    .user_avatar {
      padding-left: 20px;
      @include discen;
      .user_name {
        color: #ffffff;
        font-size: 14px;
        padding: 0 10px;
        color: rgba(255, 255, 255, 0.65);
      }
    }
  }
  .index {
    padding: $px_24;
    display: flex;
    .left {
      height: 973px;
    }
    .center {
      width: $px_24;
    }
    .right {
      height: 973px;
    }
  }
  .new_pages {
    padding: 0 $px_24 $px_24 $px_24;
    .new_pages_bg {
      background: #ffffff;
      width: 100%;
      overflow: hidden;
      height: 973px;
      .pages_col {
        display: flex;
        .iframe {
          width: 100%;
          height: 100%;
        }
        .pages_item {
          padding: $px_24/2;
          > div {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
</style>
